<template>
  <section
    ref="gaugeChartRef"
    class="gauge-chart"
  />
</template>

<script lang="ts">
import {
  defineComponent, nextTick, ref, watch,
} from 'vue';

import { init } from 'echarts';

import type { EChartsOption } from 'echarts';

export default defineComponent({
  name: 'GaugeChart',
  props: {
    data: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const gaugeChartRef = ref();
    const createChart = () => {
      const gaugeChart = init(gaugeChartRef.value);
      const option: EChartsOption = {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            radius: '100%',
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: '#007af5',
              },
            },
            axisLine: {
              lineStyle: {
                width: 8,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [props.data],
          }
        ],
      };
      gaugeChart.setOption(option);
    };

    watch(
      () => props.data,
      () => {
        nextTick(() => {
          createChart();
        });
      },
      {
        immediate: true,
      }
    );
    return {
      gaugeChartRef,
    };
  },
});
</script>

<style lang="scss" scoped>
.gauge-chart {
  width: 50px;
  height: 50px;
}
</style>
